<template>
  <van-config-provider :theme-vars="themeVars" theme-vars-scope="global">
    <router-view v-slot="{ Component }">
      <KeepAlive :include="['home', 'mdetail']">
        <component :is="Component" />
      </KeepAlive>
    </router-view>
    <!-- 用户二维码 -->
    <van-dialog v-model:show="globe.showQrcode" title="店主二维码" confirmButtonText="关闭">
      <van-image class="qrcode" :src="`${globe.staticDomain}/${info.wx_qrcode}`" fit="cover" />
    </van-dialog>
    <!-- 分享链接失效 -->
    <van-popup v-model:show="globe.showExpire" :close-on-click-overlay="false" class="expirePop">
      <img src="@/assets/img/expire.png" class="expire" @click="globe.setQrcodeDialog(true)">
    </van-popup>
  </van-config-provider>
</template>
<script setup>
import { useRoute } from 'vue-router'
import { useGlobeStore, useUserStore } from '@/stores'
import { storeToRefs } from 'pinia'
import FingerprintJS from '@fingerprintjs/fingerprintjs';
import axios from 'axios'

const route = useRoute();
const globe = useGlobeStore();
const user = useUserStore()
const { info } = storeToRefs(user)
const themeVars = reactive({
  primaryColor: "#F96235"
});
const dom = document.getElementById("preLoading");

watch(() => globe.loading, (val) => {
  dom.style.display = val ? "block" : "none";
})

onBeforeMount(async()=>{
  if (!globe.cid){
    const fp = await FingerprintJS.load();
    const { visitorId } = await fp.get();
    globe.setCid(visitorId);
  }
  axios.get("https://static.mojing310.com/fxzs-config.json?v=" + Date.now(), { withCredentials: false }).then(res => {
    if (res && res.data) {
      user.initConfig(res.data);
    }
  })
})
onMounted(()=>{
  user.updateShareInfo();
})
watch(()=>route.meta.title, (title) => {
  let label;
  if (route.path.includes('detail')){
    label = route.params.type+title;
  }else{
    label = title
  }
  const parameter = { type: 'pageview', action: 'view', opt_label: label }
  if (route.params.id){
    parameter.data_id = Number(route.params.id)
  }
  user.log(parameter);
}, { once: true });
</script>
<style lang="less" scoped>
.qrcode {
  display: block;
  margin: 20px auto;
  width: 120px;
  height: 120px;
}
.expirePop {
  --van-popup-background: transparent;
  .expire {
    width: 100%;
    display: block;
  }
}
</style>
